<script lang="ts" setup>
import { toggleDark } from "~/composables";
import { useRouter } from 'vue-router'
const router = useRouter()
const handleRoute = (route: any) => {
  router.push(route)
}
function logout() {
  localStorage.removeItem('token')
  localStorage.removeItem('user_id')
  localStorage.removeItem('username')

  router.push({ name: 'login' })

}
</script>

<template>
  <el-menu :router="true" class="el-menu-demo flex w-full h-full justify-center" mode="horizontal">
    <el-menu-item :route="{ name: 'index' }" index="1">视频观看</el-menu-item>
    <el-menu-item :route="{ name: 'contest' }" index="2">在线测试</el-menu-item>
    <el-menu-item :route="{ name: 'ai' }" index="3">AI答疑</el-menu-item>
    <el-menu-item :route="{ name: 'person' }" index="4">个人中心</el-menu-item>
    <el-menu-item h="full" class="float-end" @click="toggleDark()">
      <button class="border-none w-full bg-transparent cursor-pointer" style="height: var(--ep-menu-item-height)">
        <i inline-flex i="dark:ep-moon ep-sunny" />
      </button>
    </el-menu-item>
    <el-menu-item h="full" class="float-end" @click="logout()">
      <button class="border-none w-full bg-transparent cursor-pointer" style="height: var(--ep-menu-item-height)">
        <i inline-flex i="ep-close" />
      </button>
    </el-menu-item>

  </el-menu>
</template>
